<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta content="never" name="referrer">
        <title>Title</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            ul li {
                list-style: none;
            }

            .item {
                display: flex;
                justify-content: space-around;
                width: 800px;
                flex-wrap: wrap;
            }

            .item li {
                width: 120px;
                height: 200px;
                margin: 10px;
                text-align: center;
                font-size: 14px;
            }
            .item img,.item_img{
                width: 130px;
                height: 160px;
            }
            .item_img span{
                position: relative;
                bottom: 25px;
                left: -21px;
                color: white;
            }
            }
        </style>
    </head>
    <body>

        <div id="app">
            <child :mydata="dy" filmtitle="电影"></child>
            <child :mydata="dsj" filmtitle="电视剧"></child>
        </div>
        <script src="js/vue.js"></script>
        <script src="js/axios.min.js"></script>
        <script type="template" id="neirong">
            <div>
                <h3>最近热门{{filmtitle}}</h3>
                <ul class="item">
                    <li v-for="i in mydata">
<!--                        <img src="img/dy1.jpg">-->
                        <div class="item_img"><img :src="i.cover"><span>{{i.episodes_info==""?'':i.episodes_info}}</span></div>
                        <div>{{i.title}}{{i.rate==""?"暂无评分":i.rate}}</div>
                    </li>
                </ul>
            </div>
        </script>
        <script>
            var child = {
                props: ['mydata', 'filmtitle'],
                template: `#neirong`
            }

            var vm = new Vue({
                el: '#app',
                data: {
                    dy: [],
                    dsj: []
                },
                components: {
                    child
                },
                mounted() {
                    axios.get('./json/dianying.json').then(res => {
                        this.dy = res.data.subjects;
                    })
                    axios.get('./json/dianshiju.json').then(res => {
                        this.dsj = res.data.subjects;
                    })
                }
            });
        </script>
    </body>
</html>